<template>
    <div class="container">
        <module-title title="企业发展预警" :noBg="true"></module-title>
        <div class="flex" style="padding:18px 30px 0 30px">
            <jz-info :imgStyle="{'height': '79px'}" :valueStyle="{'fontSize': '30px'}" :icon="require('../../assets/icon-warn.png')" :label="'企业数量下降持续月数'" unit="月" :data="data.value1"></jz-info>
            <jz-info :imgStyle="{'height': '79px'}"  :valueStyle="{'fontSize': '30px'}" :icon="require('../../assets/icon-descend.png')" :label="'当前企业数量占去年年底比值'" unit="%" :data="data.value2"></jz-info>
        </div>
        <r-text text="最近5个月的企业数量" style="margin:26px 0 0 40px"></r-text>
        <div ref="dialogChart1" style="height:200px"></div>
    </div>
</template>
<script>
import JzInfo from '../JzInfo.vue'
import ModuleTitle from '../ModuleTitle.vue'
import RText from '../RText.vue'
import * as echarts from 'echarts';
export default {
    components: { ModuleTitle, JzInfo, RText },
    props: {
        data: Object
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
        data: {
            handler() {
                this.$nextTick(() => {
                    this.showChart(this.chart, 'dialogChart1', this.getOption())
                })
            },
            immediate: false,
            deep: true
        }
    },

    methods: {
        update() {
            this.showChart(this.chart, 'dialogChart1', this.getOption())
            //this.$forceUpdate();
        },
        showChart(instance, id, option) {
            if (!instance) {
                instance = echarts.init(this.$refs[id]);
            }
            this.$refs[id].setAttribute('_echarts_instance_','')
            instance.setOption(option,true);
            this.$forceUpdate();
        },
        getOption() {
            let labelStyle = {
                color: '#FFF', fontSize: 14
            }

            return {
                tooltip: {
                    trigger: 'axis',
                    showContent: false,
                    axisPointer:{
                        type: 'line',
                        z: 1,
                        lineStyle: {
                            color: 'rgba(48, 69, 86, 0.39)',
                            type: 'solid',
                            width: 26
                        }
                    },
                },
                grid: {
                    top: 40,
                    left: 68,
                    right:34,
                    bottom: 42
                },
                xAxis: {
                    axisLabel: labelStyle,
                    axisTick: {show: false},
                    axisLine: {
                        lineStyle: {color: '#36525E'}
                    },
                    data: this.data.list.map(e => e.name)
                },
                yAxis: {
                    name: '单位：家',
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 14    
                    },
                    axisLabel: labelStyle,
                    splitLine: {
                        color: 'red'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {color: '#36525E'}
                    },
                    splitLine: {
                        z: 3,
                        lineStyle: {
                            color: '#36525E',
                            width: 0.8
                        }
                    }
                },
                series:[{
                    type: 'bar',
                    barWidth: 16,
                    data: this.data.list,
                    z: 2,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y:1,
                            colorStops:[{
                                offset: 0, color: '#1D92C2'
                            },{
                                offset: 1, color: '#65D2FF'
                            }]
                        }
                    }
                }]
            }
        }
    },
     
}
</script>
<style lang="less" scoped>
.container {
    background: linear-gradient(360deg, rgba(8, 132, 255, 0) 0%, rgba(8, 132, 255, 0.12) 100%);
}
.flex {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>